<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
    <div class="navbar">“微商城”后台管理系统</div>
    <el-sub-menu class="menu" index="1">
      <template #title>
        <el-avatar class="avatar" > </el-avatar>
      </template>
      <router-link >
        <el-menu-item index="5">个人中心</el-menu-item>
      </router-link>
      <el-menu-item index="6">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
// import { onMounted } from 'vue'
// import { getAdmin } from '../api'
// import useAdmin from '../stores/admin'
// import router from '../router/router'
// import { getToken } from '../utils/token'
// import useToken from '../stores/token'
// import notification from '../utils/notification'

// const { removeToken } = useToken()

// const { admin, updateAdmin, removeAdmin } = useAdmin()

// onMounted(() => {
//   loadAdmin()
// })

// const loadAdmin = async () => {
//   let data = await getAdmin()
//   updateAdmin({
//     username: data.username,
//     avatar: data.avatar
//   })
// }

// const onLogout = async () => {
//   removeToken()
//   removeAdmin()
//   router.push({ name: 'login' })
//   notification({
//     message: '退出成功',
//     type: 'success'
//   })
// }
</script>

<style scoped lang="scss">
.el-menu-demo {
  background: linear-gradient(90deg, #1493fa, #01c6fa);
}
.navbar {
  color: white;
  font-size: 20px;
}
.menu {
  margin-left: auto;
}

</style>